<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">
	

<h:head>
	<title>祖龙娱乐  - BI系统</title>
	<link href="../../css/component.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="../../js/highcharts.js"></script>
	<script type="text/javascript" src="../../js/drawChart.js"></script>
</h:head>

<h:body>
	<ui:param name="bean" value="#{bossRealTimeAction}" />
	
	<span class="pagetitle">实时数据 —— 实时监控</span>
	<p:separator />
	
	<h:form id="fsearch">
		<p:poll interval="20" listener="#{bean.search()}" update=":dform" />
	</h:form>

	<!-- 数据展示部分，包含表格和图表 -->
	<h:form id="dform">
		<div class="data" id="data">
			<p:panel id="panel1" header="实时数据 ——  #{bean.lastUpdateTimeStr}" style="margin-bottom:10px;">
				<p:dataGrid var="d" columnIndexVar="ci"  value="#{bean.datas}" columns="8">
					<p:panel id="pp#{ci}" header="#{d.title}" style="text-align:center">
						<h:panelGrid columns="1" style="width:100%">
							<h:outputText value="#{d.value}" />
						</h:panelGrid>
					</p:panel>
                    <p:tooltip id="toolTip#{ci}" for="pp#{ci}" value="#{pageHelper.getToolTip(d.title)}" trackMouse="true" />
				</p:dataGrid>
			</p:panel>

			<br />
			<p:separator />
			<p:panel id="panel2" header="全服在线（Top20） ——  #{bean.lastMaxOnlineNumStr}；#{bean.serverNumStr}"  style="margin-bottom:10px;">
				<p:selectOneButton value="#{bean.selectedItem}" rendered="#{pageHelper.isServerClass()}">
		            <f:selectItem itemLabel="全部平台" itemValue="all" />
	            	<f:selectItem itemLabel="ios正版" itemValue="ioszb" />
					<f:selectItem itemLabel="混服" itemValue="hf" />
					<f:selectItem itemLabel="应用宝" itemValue="yyb" />
					<f:selectItem itemLabel="硬核联盟" itemValue="yhlm" />
	            	<p:ajax update="panel2" listener="#{bean.selectItem}" />
	        	</p:selectOneButton>

				<h:panelGrid columns="1" style="width:100%">
					<div id="highchartChart0" style="width:66%;height:0; border:0;">
					</div>
				</h:panelGrid>

				<p:layout style="min-width:99%;max-width:99%;min-height:470px;max-height:470px;">
					<p:layoutUnit position="west" size="70%">
						<p:dataGrid id="chart" var="c" value="#{bean.chartData}" columns="1" layout="grid">
							<h:panelGrid columns="1" style="width:100%">
								<div id="highchartChart" style="width:100%;height:440px; border:0;">
									<script type="text/javascript">
										generateChart('#{c.jsonStr}', 'columnline', '', 'highchartChart0');
									</script>
								</div>
							</h:panelGrid>
						</p:dataGrid>
					</p:layoutUnit>

					<p:layoutUnit position="center" size="30%">
						<p:dataTable id="dlist" var="l" value="#{bean.detailDatas}" scrollable="true" resizableColumns="true" paginator="true" paginatorPosition="bottom" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  rows="15" style="text-align:center;">
							<p:column headerText="服务器名称" styleClass="column grcnewUser">
								<h:outputLabel value="#{l.servername}" />
							</p:column>
							<p:column headerText="区服类型" styleClass="column grcnewUser">
								<h:outputLabel value="#{l.itemName}" />
							</p:column>
							<p:column headerText="在线帐号" styleClass="column grcnewUser" sortBy="#{l.onlinenum}">
								<h:outputLabel value="#{l.onlinenum}" />
							</p:column>
							<p:column headerText="活跃帐号" styleClass="column grcnewUser" sortBy="#{l.activenum}">
								<h:outputLabel value="#{l.activenum}" />
							</p:column>
						</p:dataTable>
					</p:layoutUnit>
				</p:layout>
			</p:panel>

            <br />
            <p:separator />
            <p:panel id="panel3" header="整体实时在线"  style="margin-bottom:10px;">
                <p:dataGrid id="chart1" var="c" value="#{bean.onlineRealTimeChart}" columns="1" layout="grid">
                    <p:panel style="text-align:center">
                        <h:panelGrid columns="1" style="width:100%">
                            <div id="highchartChart1" style="width:100%;height:400px; border:0;">
                                <script type="text/javascript">
                                    generateChart('#{c.jsonStr}', 'linemore', '1');
                                </script>
                            </div>
                        </h:panelGrid>
                    </p:panel>
                </p:dataGrid>
            </p:panel>
		</div>
	</h:form>

	<!-- 页脚 -->
	<div class="footer"></div>
</h:body>
</html>